<template>
      <div style="display:flex;justify-content:space-between;width:100%">
        <div>{{ treeNode.name }}</div>
        <div style="display:flex;gap:10px">
          <span>{{ treeNode.manager }}</span>
          <el-dropdown @command="handleCommand" style="cursor:pointer">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <template v-if="!isRoot">
                <el-dropdown-item command="update">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
</template>

<script>
import { delDepts } from '@/api/departments'
export default {
  name: 'treetools',
  data() { 
    return {
      //data处访问不到在main.js中注册的element组件
      departmentHandle: {
        add: this.add,
        update: this.update,
        del:this.del,
      }
    }
  },
  props: {
    treeNode: {
      type: Object,
      required:true
    },
    isRoot: {
      type: Boolean,
      default:false
    } 
  },
  methods: {
    handleCommand(command) { 
      this.departmentHandle[command]()
    },
    add() {
      //添加子组件的操作
      //告诉父组件 显示弹层
      this.$emit('addDepts',this.treeNode) // 传出treeNode 是因为添加子部门需要当前节点部门的数据
    },
    update() {
      //编辑子组件的操作
      //告诉父组件，我要进行编辑部门操作了
      this.$emit('editDepts',this.treeNode)
    },
    // 下拉菜单中删除部门操作
    del() {
      // 调用element组件中的MessageBox组件来提示是否需要删除
      this.$confirm(`确定要删除"${this.treeNode.name}"部门吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { 
        delDepts(this.treeNode.id).then(() => {
          // 当代码执行到此处，说明已经删除成功，需要告诉父组件已经删除成功
          this.$emit('delSuccess') // emit 传递的事件叫做自定义事件，在组件中需要@传过去的名字="本地要进行的操作"
        }).catch(() => {
          
        })
      }).catch(() => { 
        
      })
    },
  }
}
</script>

<style>

</style>